.erd-card {
    width: auto;
    min-width: 160px;
    max-width: 300px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    -moz-box-shadow: $primaryBlue 0px 1px 2px, $primaryBlue 0px 0px 0px 2px;
    -webkit-box-shadow: $primaryBlue 0px 1px 2px, $primaryBlue 0px 0px 0px 2px;
    box-shadow: $primaryBlue 0px 1px 2px, $primaryBlue 0px 0px 0px 2px;
    border-radius: $borderRadius;
    box-sizing: border-box;
    overflow: hidden;

    @include themify() {
        background-color: themed($erdCardWrapBg);
        color: themed($color);
    }

    &__wrap {
        padding: 10px 15px 10px 20px;
        background-color: rgba($primaryBlue, 0.15);
    }

    &__title {
      font-weight: $fontWeightBold;
    }

    &__column {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        &_name {
          flex-shrink: 0;
          padding-right: 5px;
          margin-bottom: 0;
        }

        a.erd-card__column_name {
          color: inherit;
          position: relative;
        }

        &.highlighted {
          position: relative;

          &::after {
            content: "";
            width: 100%;
            height: 4px;
            position: absolute;
            left: 0;
            bottom: -3px;
            background-color: $warningColor;
            border-radius: $borderRadius;

          }

          .erd-card__column_name {
            text-decoration: none;
          }
        }

        &_type {
          color: $primaryMutedColor;
          flex-shrink: 0
        }

        &.fk-column, &.pk-column {
          &:before {
            font: var(--fa-font-solid);
            font-size: 10px;
            content: "\f084";
            left: -14px;
            position: absolute;
          }

        }

        &.pk-column:before {
          color: $primaryBlue;
        }

        &.fk-column:before {
          color: $primaryMutedColor;
        }
      }
  }